<template>
  <div class="container"> 
    <div class="header">
        <van-icon name="arrow-left" @click="goBack" class="header-left" size="30" />
        订单详情
    </div>
    <!-- 订单进度条 -->
    <status-bar :item="stateMap[orderDetail.trade_state]" />
    <!-- 待支付 -->
    <div class="dzf" v-if="orderDetail.trade_state === '待支付'">
        <div class="text1">订单待支付</div>
        <div class="text2">
            请在
            <counter :second="second" />
            内完成支付，超时订单将自动取消
        </div>
        <div class="text3">
            <van-button type="success" @click="openCode">立即支付(0.5元)</van-button>
        </div>
    </div>
    <!-- 待服务 -->
    <div class="dzf" v-if="orderDetail.trade_state === '待服务'">
        <div class="text1">正在为你安排服务专员...</div>
        <div class="text2">请保持手机畅通，服务专员会尽快联系你</div>
    </div>
    <!-- 已完成 -->
    <div class="dzf" v-if="orderDetail.trade_state === '已完成'">
        <div class="text1">订单已完成</div>
        <div class="text2">感谢您的使用，如有问题请联系客服！！！</div>
    </div>
    <!-- 已取消 -->
    <div class="dzf" v-if="orderDetail.trade_state === '已取消'">
        <div class="text1">订单已取消</div>
        <div class="text2">期待下次为您服务，如需帮助可咨询客服！</div>
    </div>
    <!-- 订单详情 -->
    <van-cell-group class="card">
        <div class="header-text">预约信息</div>
        <van-cell
          v-for="(item, key) in makeInfo"
          :key="key"
          :title="item"
          :value="formatData(key)"
        >
        </van-cell>
    </van-cell-group>
    <van-cell-group class="card">
        <div class="header-text">订单信息</div>
        <van-cell
          v-for="(item, key) in orderInfo"
          :key="key"
          :title="item"
          :value="formatData(key)"
        >
        </van-cell>
    </van-cell-group>

    <!-- 二维码弹框 -->
    <van-dialog :show-confirm-button="false" v-model:show="showCode">
    <van-icon name="cross" class="close" @click="closeCode" />
    <div>微信支付</div>
    <van-image
        width="150"
        height="150"
        :src="codeImg"
    ></van-image>
    <div>请使用本人微信扫描二维码</div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import statusBar from '@/components/statusBar.vue'
import counter from '../../components/counter.vue'
import Qrcode from 'qrcode'


// 创建vue实例
const { proxy } = getCurrentInstance()
const router = useRouter()
// 跳转到当前路由，我们可以使用route拿到当前路由的参数oid
const route = useRoute()

// 订单详情信息
const orderDetail = ref({})
// 隐藏二维码弹框
const showCode = ref(false)
const codeImg = ref('')

const second = computed(() => {
    return orderDetail.value.order_start_time ? orderDetail.value.order_start_time + 7200000 - Date.now() : 0
})

// 根据订单状态展示不同进度条（不需要设置响应式，因为状态不会改变）
const stateMap = {
    '待支付': 10,
    '待服务': 20,
    '已完成': 30,
    '已取消': 40
}
// 订单详情
const makeInfo = {
    service_name: '预约服务',
    hospital_name: '就诊医院',
    starttime: '期望就诊时间',
    'client.name': '就诊人',
    'client.mobile': '就诊人电话',
    receiveAddress: '接送地址',
    demand: '其他需求'
}
const orderInfo = {
    tel: '就诊人电话',
    order_start_time: '下单时间',
    price: '应付金额',
    out_trade_no: '订单编号'
}
// 订单详情数据
const formatData = (key) => {
  if (key.indexOf(".") === -1) {
    if (key === "order_start_time") {
      return formatTimestamp(orderDetail.value[key]);
    }
    return orderDetail.value[key];
  }
  let arr = key.split(".").reduce((o, p) => {
    return (o || {})[p];
  }, orderDetail.value);
  return arr;
}
function formatTimestamp(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以需要+1
  const day = String(date.getDate()).padStart(2, "0");

  return `${year}-${month}-${day}`;
}

onMounted(async () => {
    const { data } = await proxy.$api.getOrderDetail({ oid: route.query.oid })
    Object.assign(orderDetail.value, data.data)
    console.log(orderDetail.value)
})

const goBack = () => {
  router.go(-1)
}

// 打开二维码
const openCode = () => {
  showCode.value = true
  Qrcode.toDataURL(orderDetail.value.code_url).then(item => {
    return codeImg.value = item
  })
}
// 关闭二维码
const closeCode = () => {
    showCode.value = false
}
</script>

<style scoped lang="less">
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  background-color: #fff;
  line-height: 40px;
  text-align: center;
  .header-left {
    float: left;
   }
}
.card {
  margin: 15px 0;
  padding: 10px;
  .header-text {
    padding-left: 5px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid red;
  }
}
.dzf {
  padding: 20px;
  .text1 {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: #666;
  }
  .text2 {
    font-size: 14px;
    color: #666;
  }
  .text3 {
    text-align: center;
    .van-button {
      margin-top: 10px;
      margin-left: 10px;
      width: 80%;
      font-weight: bold;
    }
  }
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
